@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&family=Space+Grotesk:wght@500;700&display=swap');

:root {
    /* Extracted Colors from image_61b47a.jpg */
    --bg-main: #FCFAF2;         /* Warm Cream Background */
    --bg-surface: #FFFFFF;      /* Clean White for Cards */
    --bg-glass: rgba(252, 250, 242, 0.85);
    --border-glass: rgba(108, 117, 125, 0.15); /* Subtle Slate Border */
    
    --accent-yellow: #E1BB41;   /* Dharmothana Trust 40% Yellow */
    --accent-gold: #BA943C;     /* Local 20% Mustard Gold */
    --accent-slate: #6C757D;    /* Karnataka Government 40% Slate Grey */
    
    --text-main: #1A1A1A;       /* Deep contrast for readability */
    --text-muted: #5A5A5A;
    
    --font-head: 'Space Grotesk', system-ui, sans-serif;
    --font-body: 'Plus Jakarta Sans', system-ui, sans-serif;
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--bg-main);
    color: var(--text-main);
    font-family: var(--font-body);
    line-height: 1.6;
    overflow-x: hidden;
    width: 100%;
}

.container {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* Glass Header Navigation */
.header-wrap {
    position: fixed;
    top: 1.25rem;
    left: 0;
    right: 0;
    z-index: 1000;
}

.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.75rem;
    background: var(--bg-glass);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-glass);
    border-radius: 100px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.brand-logo {
    font-family: var(--font-head);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-main);
    text-decoration: none;
    letter-spacing: -0.02em;
}

.nav-menu {
    display: flex;
    gap: 1.75rem;
    list-style: none;
    align-items: center;
}

.nav-menu a {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    transition: color 0.3s ease;
}

.nav-menu a:hover {
    color: var(--accent-gold);
}

.btn-cta {
    background: linear-gradient(135deg, var(--accent-yellow), var(--accent-gold));
    color: #1A1A1A !important;
    padding: 0.65rem 1.5rem;
    border-radius: 100px;
    font-weight: 700 !important;
    text-decoration: none;
    display: inline-block;
    box-shadow: 0 8px 20px rgba(225, 187, 65, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.btn-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 25px rgba(225, 187, 65, 0.4);
}

/* Hero Section */
.hero-section {
    padding: 10rem 0 6rem 0;
    min-height: 95vh;
    display: flex;
    align-items: center;
    position: relative;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 3.5rem;
    align-items: center;
}

.hero-title {
    font-family: var(--font-head);
    font-size: clamp(3rem, 5.5vw, 5.5rem);
    line-height: 1.02;
    letter-spacing: -0.04em;
    margin-bottom: 1.5rem;
    color: var(--text-main);
}

.text-gradient {
    background: linear-gradient(135deg, var(--accent-gold), var(--accent-slate));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-desc {
    font-size: 1.2rem;
    color: var(--text-muted);
    margin-bottom: 2.5rem;
    max-width: 540px;
}

/* Floating Student Caricature Box */
.caricature-box {
    background: var(--bg-surface);
    border: 1px solid var(--border-glass);
    border-radius: 32px;
    padding: 2.5rem;
    text-align: center;
    position: relative;
    box-shadow: 0 20px 50px rgba(108, 117, 125, 0.1);
    animation: floatAnim 6s ease-in-out infinite;
}

@keyframes floatAnim {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-18px); }
}

.caricature-svg {
    width: 100%;
    max-width: 260px;
    height: auto;
    margin: 0 auto 1.5rem auto;
}

/* Cards & Section Grids */
.section-tag {
    color: var(--accent-gold);
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    display: block;
    margin-bottom: 0.5rem;
}

.section-head {
    font-family: var(--font-head);
    font-size: clamp(2.2rem, 3.5vw, 3.2rem);
    margin-bottom: 3rem;
    letter-spacing: -0.02em;
    color: var(--text-main);
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-bottom: 4rem;
}

.glass-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-glass);
    border-radius: 24px;
    padding: 2.25rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.glass-card:hover {
    transform: translateY(-8px);
    border-color: var(--accent-yellow);
    box-shadow: 0 15px 35px rgba(225, 187, 65, 0.15);
}

.glass-card h3 {
    font-family: var(--font-head);
    font-size: 1.35rem;
    margin-bottom: 0.75rem;
    color: var(--text-main);
}

.glass-card p {
    color: var(--text-muted);
    font-size: 0.95rem;
}

/* Footer */
.footer-wrap {
    background: var(--accent-slate);
    color: #FFFFFF;
    padding: 4.5rem 0 2rem 0;
    margin-top: 6rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2.5rem;
    margin-bottom: 3.5rem;
}

.footer-grid h3, .footer-grid h4 {
    color: #FFFFFF;
}

.footer-grid a, .footer-grid p {
    color: rgba(255, 255, 255, 0.85);
}

.footer-grid a:hover {
    color: var(--accent-yellow);
}

.footer-bottom {
    text-align: center;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
}

@media (max-width: 900px) {
    .hero-grid { grid-template-columns: 1fr; }
    .nav-menu { display: none; }
}
/* --- Cinematic Video Hero Section (Fixed) --- */
.hero-video-wrapper {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 1.5rem;
    /* Removed overflow: hidden; so the avatar doesn't get cut off */
}

/* New container strictly for the video background */
.video-background-container {
    position: absolute;
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    overflow: hidden; /* Keeps the video contained */
    z-index: -2;
}

.hero-video-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.05); /* Prevents edge-flicker */
}

.hero-overlay {
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%; 
    height: 100%;
    background: linear-gradient(135deg, rgba(26, 26, 26, 0.75), rgba(108, 117, 125, 0.65));
    z-index: 1;
}

.hero-content-center {
    position: relative;
    z-index: 5;
    max-width: 850px;
    margin-top: 4rem;
}

.hero-content-center .hero-title {
    font-family: var(--font-head);
    font-size: clamp(3rem, 6vw, 6rem);
    line-height: 1.05;
    letter-spacing: -0.04em;
    margin-bottom: 1.5rem;
    color: #FCFAF2;
}

.hero-content-center .text-gradient {
    background: linear-gradient(135deg, var(--accent-yellow), var(--accent-gold));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-content-center .hero-desc {
    font-size: 1.25rem;
    color: rgba(252, 250, 242, 0.9);
    margin: 0 auto 2.5rem auto;
    max-width: 600px;
}

.btn-outline-light {
    color: #FCFAF2;
    text-decoration: none;
    padding: 0.65rem 1.5rem;
    border: 2px solid rgba(252, 250, 242, 0.6);
    border-radius: 100px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-outline-light:hover {
    background: rgba(252, 250, 242, 0.1);
    border-color: #FCFAF2;
}

/* --- Floating Overlap Caricature (Fixed Z-Index) --- */
.floating-student-avatar {
    position: absolute;
    bottom: -80px; 
    right: 8vw;
    width: 280px;
    background: #FCFAF2;
    border: 1px solid rgba(108, 117, 125, 0.15);
    border-radius: 28px;
    padding: 2rem;
    box-shadow: 0 25px 50px rgba(0,0,0,0.15);
    z-index: 10; /* Ensures it sits above the next section */
    text-align: center;
    animation: floatAvatar 6s ease-in-out infinite;
    display: none;
}

@media (min-width: 992px) {
    .floating-student-avatar {
        display: block;
    }
}

@keyframes floatAvatar {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-15px) rotate(1deg); }
}

/* Dark slate/glass overlay to ensure text is readable over the video */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(26, 26, 26, 0.75), rgba(108, 117, 125, 0.65));
    z-index: -1;
}

.hero-content-center {
    position: relative;
    z-index: 1;
    max-width: 850px;
    margin-top: 4rem; /* Accounts for the fixed header */
}

/* Force light text on the dark video overlay */
.hero-content-center .hero-title {
    font-family: var(--font-head);
    font-size: clamp(3rem, 6vw, 6rem);
    line-height: 1.05;
    letter-spacing: -0.04em;
    margin-bottom: 1.5rem;
    color: #FCFAF2; /* Cream text */
}

.hero-content-center .text-gradient {
    background: linear-gradient(135deg, var(--accent-yellow), var(--accent-gold));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-content-center .hero-desc {
    font-size: 1.25rem;
    color: rgba(252, 250, 242, 0.9);
    margin: 0 auto 2.5rem auto;
    max-width: 600px;
}

/* Outline button specifically for dark backgrounds */
.btn-outline-light {
    color: #FCFAF2;
    text-decoration: none;
    padding: 0.65rem 1.5rem;
    border: 2px solid rgba(252, 250, 242, 0.6);
    border-radius: 100px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-outline-light:hover {
    background: rgba(252, 250, 242, 0.1);
    border-color: #FCFAF2;
}
/* Internal Page Hero */
.page-hero-wrapper {
    padding: 10rem 1.5rem 5rem;
    background: var(--accent-slate);
    color: #FFFFFF;
    text-align: center;
    border-bottom: 4px solid var(--accent-yellow);
}

.page-hero-title {
    font-family: var(--font-head);
    font-size: clamp(2.5rem, 4vw, 4rem);
    margin-bottom: 1rem;
    color: #FFFFFF;
}

.page-hero-desc {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.85);
    max-width: 600px;
    margin: 0 auto;
}
/* CSS Animations for the Classroom */
.animated-classroom-container {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(108, 117, 125, 0.1);
    background: #FCFAF2;
}

.classroom-svg {
    width: 100%;
    height: auto;
    display: block;
}

/* Smartboard Chart Growth Animation */
.chart-bar {
    transform-origin: bottom;
    animation: growBars 3s cubic-bezier(0.25, 1, 0.5, 1) infinite alternate;
}
.bar-1 { animation-delay: 0.2s; }
.bar-2 { animation-delay: 0.4s; }
.bar-3 { animation-delay: 0.6s; }
.bar-4 { animation-delay: 0.8s; }

@keyframes growBars {
    0% { height: 0; transform: translateY(0); }
    100% { height: 120px; transform: translateY(-120px); }
}

/* Pulsing Recording/Status Dot */
.pulse-dot {
    animation: pulse 1.5s ease-in-out infinite alternate;
}
@keyframes pulse {
    0% { opacity: 0.3; transform: scale(0.9); }
    100% { opacity: 1; transform: scale(1.2); }
}

/* Laptop Hover & Glow Animation */
.floating-laptop {
    animation: float 4s ease-in-out infinite;
}
.screen-glow {
    animation: screenFlicker 3s infinite alternate;
}
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
@keyframes screenFlicker {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 0.4; }
}

/* Plant Leaves Waving in the wind */
.leaf {
    transform-origin: 705px 340px;
    animation: wave 5s ease-in-out infinite alternate;
}
.leaf-2 {
    animation-delay: 1s;
    animation-duration: 6s;
}
@keyframes wave {
    0% { transform: rotate(-5deg); }
    100% { transform: rotate(5deg); }
}

/* Floating STEM Interface Symbols */
.float-1 { animation: floatAround 6s ease-in-out infinite; }
.float-2 { animation: floatAround 5s ease-in-out infinite reverse; }
.float-3 { animation: floatAround 7s ease-in-out infinite 1s; }

@keyframes floatAround {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(15px, -20px) rotate(15deg); }
}
/* Container Setup */
.digital-classroom-wrapper {
    width: 100%;
    max-width: 850px;
    margin: 3rem auto;
    border-radius: 20px;
    background: #FCFAF2;
    box-shadow: 0 15px 35px rgba(108, 117, 125, 0.15);
    border: 1px solid rgba(108, 117, 125, 0.2);
    overflow: hidden;
}

.digital-classroom-svg {
    width: 100%;
    height: auto;
    display: block;
}

/* 1. CCTV Scanning Animation */
.cctv-camera {
    transform-origin: 40px 65px;
    animation: scanRoom 8s ease-in-out infinite alternate;
}
.camera-beam {
    animation: beamFlicker 4s infinite alternate;
}

@keyframes scanRoom {
    0% { transform: rotate(-20deg); }
    100% { transform: rotate(35deg); }
}
@keyframes beamFlicker {
    0%, 100% { opacity: 0.1; }
    50% { opacity: 0.25; }
}

/* 2. Web Code Typing Animation */
.code-line {
    animation: typeCode 4s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}
.cl-1 { animation-delay: 0.0s; width: 140px; }
.cl-2 { animation-delay: 0.5s; width: 180px; }
.cl-3 { animation-delay: 1.0s; width: 120px; }
.cl-4 { animation-delay: 1.5s; width: 80px; }

@keyframes typeCode {
    0% { transform: scaleX(0); opacity: 0; }
    15% { transform: scaleX(1); opacity: 1; }
    80% { transform: scaleX(1); opacity: 1; }
    100% { transform: scaleX(0); opacity: 0; }
}

.wireframe-pulse {
    animation: pulseCircle 2s ease-in-out infinite alternate;
}
@keyframes pulseCircle {
    0% { transform: scale(0.8); opacity: 0.1; }
    100% { transform: scale(1.5); opacity: 0.4; }
}

/* 3. Spreadsheet Data Updating Animation */
.cell {
    opacity: 0.3;
    animation: dataUpdate 3s infinite;
}
.c-1, .c-5, .c-9 { animation-delay: 0.2s; animation-duration: 2s; }
.c-2, .c-6, .c-7 { animation-delay: 0.8s; animation-duration: 4s; }
.c-3, .c-4, .c-8 { animation-delay: 1.5s; animation-duration: 3.5s; }

@keyframes dataUpdate {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; fill: #BA943C; }
}
/* --- Cinematic Video Hero Section (Fixed) --- */
.hero-video-wrapper {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 1.5rem;
    /* Removed overflow: hidden; so the avatar doesn't get cut off */
}

/* New container strictly for the video background */
.video-background-container {
    position: absolute;
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    overflow: hidden; /* Keeps the video contained */
    z-index: -2;
}

.hero-video-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.05); /* Prevents edge-flicker */
}

.hero-overlay {
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%; 
    height: 100%;
    background: linear-gradient(135deg, rgba(26, 26, 26, 0.75), rgba(108, 117, 125, 0.65));
    z-index: 1;
}

.hero-content-center {
    position: relative;
    z-index: 5;
    max-width: 850px;
    margin-top: 4rem;
}

.hero-content-center .hero-title {
    font-family: var(--font-head);
    font-size: clamp(3rem, 6vw, 6rem);
    line-height: 1.05;
    letter-spacing: -0.04em;
    margin-bottom: 1.5rem;
    color: #FCFAF2;
}

.hero-content-center .text-gradient {
    background: linear-gradient(135deg, var(--accent-yellow), var(--accent-gold));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-content-center .hero-desc {
    font-size: 1.25rem;
    color: rgba(252, 250, 242, 0.9);
    margin: 0 auto 2.5rem auto;
    max-width: 600px;
}

.btn-outline-light {
    color: #FCFAF2;
    text-decoration: none;
    padding: 0.65rem 1.5rem;
    border: 2px solid rgba(252, 250, 242, 0.6);
    border-radius: 100px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-outline-light:hover {
    background: rgba(252, 250, 242, 0.1);
    border-color: #FCFAF2;
}

/* --- Floating Overlap Caricature (Fixed Z-Index) --- */
.floating-student-avatar {
    position: absolute;
    bottom: -80px; 
    right: 8vw;
    width: 280px;
    background: #FCFAF2;
    border: 1px solid rgba(108, 117, 125, 0.15);
    border-radius: 28px;
    padding: 2rem;
    box-shadow: 0 25px 50px rgba(0,0,0,0.15);
    z-index: 10; /* Ensures it sits above the next section */
    text-align: center;
    animation: floatAvatar 6s ease-in-out infinite;
    display: none;
}

@media (min-width: 992px) {
    .floating-student-avatar {
        display: block;
    }
}

@keyframes floatAvatar {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-15px) rotate(1deg); }
}

/* Only display on desktop/tablets */
@media (min-width: 992px) {
    .floating-student-avatar {
        display: block;
    }
}

@keyframes floatAvatar {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(2deg); }
}
/* --- Explore Carousel Section --- */
.explore-section {
    padding: 7rem 0 5rem;
    background-color: var(--bg-main);
    overflow: hidden;
}

.explore-header {
    text-align: center;
    margin-bottom: 4rem;
}

.explore-pre {
    font-size: 0.85rem;
    letter-spacing: 0.15em;
    color: var(--text-muted);
    text-transform: uppercase;
    font-weight: 700;
}

.explore-divider {
    width: 50px;
    height: 3px;
    background-color: var(--accent-yellow);
    margin: 1rem auto 1.5rem;
}

.explore-title {
    font-family: var(--font-head);
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    color: var(--text-main);
    margin-bottom: 1.25rem;
}

.explore-desc {
    color: var(--text-muted);
    max-width: 750px;
    margin: 0 auto;
    font-size: 1.15rem;
    line-height: 1.6;
}

/* 3D Overlapping Carousel Wrapper */
.explore-carousel-wrapper {
    position: relative;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 500px;
}

.explore-slider {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.explore-slide {
    position: absolute;
    height: 100%;
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.6s ease, z-index 0.6s;
    box-shadow: 0 15px 35px rgba(0,0,0,0.15);
}

.explore-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Carousel Slide States */
.active-slide {
    width: 50%;
    z-index: 5;
    transform: translateX(0) scale(1);
    opacity: 1;
}

.prev-slide {
    width: 35%;
    z-index: 4;
    transform: translateX(-80%) scale(0.9);
    opacity: 1;
}

.next-slide {
    width: 35%;
    z-index: 4;
    transform: translateX(80%) scale(0.9);
    opacity: 1;
}

/* Inactive Slide Dimmer (Slate Grey) */
.slide-dimmer {
    position: absolute;
    inset: 0;
    background-color: rgba(108, 117, 125, 0.75); /* Slate theme */
    transition: opacity 0.6s ease;
    z-index: 1;
}

.active-slide .slide-dimmer {
    opacity: 0;
}

/* Slide Text Overlay */
.slide-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 3rem 2.5rem;
    background: linear-gradient(to top, rgba(26,26,26,0.95) 0%, transparent 100%);
    color: #FCFAF2;
    z-index: 2;
}

.slide-content h2 {
    font-family: var(--font-head);
    font-size: 3.5rem;
    margin-bottom: 0.5rem;
    color: #FCFAF2;
    line-height: 1;
}

.slide-content p {
    font-size: 1.3rem;
    margin-bottom: 1.5rem;
    color: rgba(252, 250, 242, 0.9);
}

.slide-content h3 {
    font-family: var(--font-head);
    font-size: 1.8rem;
    margin-bottom: 1rem;
    color: #FCFAF2;
}

.learn-more {
    color: #FCFAF2;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: color 0.3s;
}

.learn-more:hover {
    color: var(--accent-yellow);
}

/* Overlapping Navigation Buttons */
.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
    background: #FCFAF2;
    border: none;
    border-radius: 50%;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    font-size: 1.2rem;
    color: var(--text-main);
    cursor: pointer;
    z-index: 10;
    transition: background 0.3s, color 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slider-btn:hover {
    background: var(--accent-yellow);
    color: #1A1A1A;
}

/* Position buttons exactly on the seam of the active slide */
.prev-btn { left: calc(25% - 28px); }
.next-btn { right: calc(25% - 28px); }

/* Mobile Responsiveness */
@media (max-width: 992px) {
    .active-slide { width: 85%; }
    .prev-slide, .next-slide { opacity: 0; pointer-events: none; }
    .prev-btn { left: 1rem; }
    .next-btn { right: 1rem; }
}
/* --- Recent Highlights News Section --- */
.news-section {
    padding: 6rem 0;
    background-color: var(--bg-surface); /* Clean white background for contrast */
}

/* Header Styling */
.news-header-wrap {
    margin-bottom: 3rem;
    position: relative;
}

.news-pre-title {
    font-size: 0.85rem;
    letter-spacing: 0.15em;
    color: var(--text-muted);
    text-transform: uppercase;
    font-weight: 700;
    display: block;
}

.news-divider {
    width: 40px;
    height: 3px;
    background-color: var(--accent-slate); /* Adjusted to match the reference's subtle line */
    margin: 0.75rem 0 1.25rem;
}

.news-title {
    font-family: var(--font-head);
    font-size: clamp(2.2rem, 4vw, 3rem);
    color: var(--text-main);
    margin-bottom: 1.5rem;
    letter-spacing: 0.02em;
}

.news-sub-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--border-glass);
    padding-top: 1rem;
}

.news-sub-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.rss-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--border-glass);
    border-radius: 50%;
    color: var(--accent-slate);
    text-decoration: none;
    transition: all 0.3s ease;
}

.rss-icon-btn:hover {
    border-color: var(--accent-gold);
    color: var(--accent-gold);
}

/* Scrollable Cards Container */
.news-carousel-container {
    display: flex;
    gap: 2rem;
    overflow-x: hidden;
    scroll-behavior: smooth;
    padding-bottom: 2rem;
}

/* Individual News Card */
.news-card {
    flex: 0 0 calc(33.333% - 1.33rem);
    min-width: 300px;
    background: var(--bg-main);
    display: flex;
    flex-direction: column;
}

/* Recreating the overlapping image block effect */
.news-image-wrapper {
    position: relative;
    width: 100%;
    height: 240px;
    overflow: hidden;
    border-bottom: 6px solid var(--accent-slate);
}

.news-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.news-card:hover .news-image-wrapper img {
    transform: scale(1.05);
}

/* Card Content */
.news-content {
    padding: 2rem 1.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: space-between;
}

.news-card-title {
    font-family: var(--font-body);
    font-size: 1.15rem;
    font-weight: 400;
    color: var(--text-main);
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.read-story-link {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--accent-slate);
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 0.1em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: color 0.3s;
}

.read-story-link:hover {
    color: var(--accent-gold);
}

/* Circular Navigation Buttons */
.news-nav-buttons {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
}

.news-nav-btn {
    width: 48px;
    height: 48px;
    border: 1px solid var(--border-glass);
    border-radius: 50%;
    background: transparent;
    color: var(--text-main);
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.news-nav-btn:hover {
    border-color: var(--accent-slate);
    background: var(--accent-slate);
    color: #FFF;
}

@media (max-width: 992px) {
    .news-card {
        flex: 0 0 calc(50% - 1rem);
    }
}

@media (max-width: 768px) {
    .news-card {
        flex: 0 0 100%;
    }
}
/* --- Announcements Slider Section --- */
.announcements-section {
    padding: 6rem 0;
    background-color: var(--bg-surface); /* Clean white background */
    position: relative;
    overflow: hidden;
}

/* The light grey offset block behind the image */
.announcement-bg-block {
    position: absolute;
    top: 5%;
    left: 0;
    width: 45%;
    height: 90%;
    background-color: #F4F5F7; 
    z-index: 1;
}

.announcements-container {
    position: relative;
    z-index: 2;
}

.announcement-slide {
    display: none; /* Hidden by default */
    align-items: center;
    gap: 5rem;
    animation: fadeSlideIn 0.6s ease-out forwards;
}

.announcement-slide.active-announcement {
    display: flex;
}

@keyframes fadeSlideIn {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}

/* Left Image Column */
.announcement-image-col {
    flex: 1.2;
    box-shadow: 0 20px 50px rgba(0,0,0,0.15);
    border-radius: 4px;
    overflow: hidden;
}

.announcement-image-col img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 16/9;
    object-fit: cover;
}

/* Right Text Column */
.announcement-text-col {
    flex: 0.8;
    padding: 2rem 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Small Sun Icon Header */
.announcement-tag {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.announcement-title {
    font-family: var(--font-body);
    font-size: clamp(2rem, 3.5vw, 2.8rem);
    color: var(--text-main);
    margin-bottom: 1.5rem;
    font-weight: 300; /* Lighter font weight for modern look */
    letter-spacing: -0.02em;
}

.announcement-desc {
    color: var(--text-muted);
    font-size: 1.15rem;
    margin-bottom: 2.5rem;
}

/* Bottom Navigation Buttons */
.announcement-nav {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
}

.ann-nav-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.2rem;
    transition: all 0.3s ease;
}

.ann-outline-btn {
    background: transparent;
    border: 1px solid var(--border-glass);
    color: var(--text-main);
}

.ann-outline-btn:hover {
    border-color: var(--accent-slate);
}

.ann-filled-btn {
    background: #1A1A24; /* Deep dark blue/black as per reference */
    border: 1px solid #1A1A24;
    color: #FCFAF2;
}

.ann-filled-btn:hover {
    background: var(--accent-slate);
    border-color: var(--accent-slate);
}

/* Mobile Responsiveness */
@media (max-width: 992px) {
    .announcement-slide.active-announcement {
        flex-direction: column;
        gap: 2rem;
    }
    .announcement-bg-block {
        width: 100%;
        left: 0;
    }
}
/* --- Our Distinctions Section --- */
.distinctions-section {
    padding: 7rem 0;
    background-color: var(--accent-slate); /* Uses your theme's slate grey */
    color: #FFFFFF;
    position: relative;
    overflow: hidden;
}

.distinctions-header {
    text-align: center;
    margin-bottom: 5rem;
}

.distinctions-pre {
    font-size: 0.85rem;
    letter-spacing: 0.2em;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    font-weight: 700;
}

.distinctions-divider {
    width: 40px;
    height: 3px;
    background-color: var(--accent-yellow);
    margin: 1rem auto 1.5rem;
}

.distinctions-title {
    font-family: var(--font-head);
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    color: #FFFFFF;
    letter-spacing: 0.02em;
}

/* Grid layout with vertical separators */
.distinctions-grid {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 1rem;
    max-width: 1300px;
    margin: 0 auto;
}

.distinction-item {
    flex: 1;
    text-align: center;
    padding: 0 1.5rem;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Vertical separator line between items */
.distinction-item:not(:last-child):after {
    content: '';
    position: absolute;
    right: 0;
    top: 10%;
    height: 80%;
    width: 1px;
    background-color: rgba(255, 255, 255, 0.2);
}

/* Circular Icon Badge */
.distinction-icon-wrap {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
    background: rgba(255, 255, 255, 0.05);
    color: #FFFFFF;
    font-size: 1.5rem;
}

.distinction-number {
    font-family: var(--font-head);
    font-size: clamp(2.5rem, 3.5vw, 3.8rem);
    font-weight: 700;
    color: #FFFFFF;
    margin-bottom: 1rem;
    line-height: 1;
}

.distinction-text {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.5;
    max-width: 240px;
}

/* Navigation buttons below grid */
.distinctions-nav {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 4rem;
}

.dist-nav-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: transparent;
    color: #FFFFFF;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.dist-nav-btn:hover {
    background: var(--accent-yellow);
    border-color: var(--accent-yellow);
    color: #1A1A1A;
}

/* Responsive collapse for mobile screens */
@media (max-width: 992px) {
    .distinctions-grid {
        flex-direction: column;
        gap: 3rem;
    }
    .distinction-item:not(:last-child):after {
        display: none;
    }
}
  /* Immersive Video Hero */
        .facility-hero {
            position: relative;
            height: 80vh;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            overflow: hidden;
        }

        .facility-video-bg {
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 100%;
            object-fit: cover;
            z-index: -2;
            transform: scale(1.1); /* Buffer for parallax */
        }

        .facility-overlay {
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background: linear-gradient(to bottom, rgba(108, 117, 125, 0.7), rgba(26, 26, 26, 0.85));
            z-index: -1;
        }

        .hero-text-content {
            position: relative;
            z-index: 1;
            color: #FCFAF2;
            padding: 0 1.5rem;
        }

        /* Modern Bento Box Grid */
        .bento-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-auto-rows: 320px;
            gap: 1.5rem;
            padding: 4rem 1.5rem;
            max-width: 1300px;
            margin: 0 auto;
        }

        .bento-item {
            position: relative;
            border-radius: 24px;
            overflow: hidden;
            group;
            cursor: pointer;
            box-shadow: 0 10px 30px rgba(0,0,0,0.05);
        }

        .bento-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
        }

        .bento-item:hover img {
            transform: scale(1.08);
        }

        .bento-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(to top, rgba(26,26,26,0.9) 0%, rgba(26,26,26,0) 60%);
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 2rem;
            transition: background 0.4s ease;
        }

        .bento-item:hover .bento-overlay {
            background: linear-gradient(to top, rgba(225, 187, 65, 0.95) 0%, rgba(26,26,26,0.2) 80%);
        }

        .bento-title {
            color: #FCFAF2;
            font-family: var(--font-head);
            font-size: 1.5rem;
            margin-bottom: 0.5rem;
            transform: translateY(10px);
            transition: transform 0.4s ease;
        }

        .bento-desc {
            color: rgba(252, 250, 242, 0.9);
            font-size: 0.95rem;
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.4s ease, transform 0.4s ease;
        }

        .bento-item:hover .bento-title { transform: translateY(0); color: #1A1A1A; }
        .bento-item:hover .bento-desc { opacity: 1; transform: translateY(0); color: #1A1A1A; }

        /* Bento Sizing Rules */
        .bento-large { grid-column: span 2; grid-row: span 2; }
        .bento-medium { grid-column: span 2; grid-row: span 1; }
        .bento-small { grid-column: span 1; grid-row: span 1; }

        /* Spotlight Feature Section */
        .spotlight-section {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4rem;
            align-items: center;
            padding: 6rem 1.5rem;
            background: var(--bg-surface);
            border-top: 1px solid var(--border-glass);
        }

        .spotlight-image-wrapper {
            border-radius: 24px;
            overflow: hidden;
            position: relative;
            height: 500px;
        }

        .spotlight-image {
            width: 100%;
            height: 120%; /* Extra height for parallax */
            object-fit: cover;
            position: absolute;
            top: -10%;
        }

        @media (max-width: 900px) {
            .bento-grid { grid-template-columns: 1fr; grid-auto-rows: 280px; }
            .bento-large, .bento-medium, .bento-small { grid-column: span 1; }
            .spotlight-section { grid-template-columns: 1fr; gap: 2rem; }
            .spotlight-image-wrapper { height: 350px; }
        }
		  /* Page-Specific Interactive Styles */
        .interactive-hero {
            padding: 12rem 1.5rem 6rem;
            background: var(--bg-main);
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .hero-title-large {
            font-family: var(--font-head);
            font-size: clamp(3.5rem, 7vw, 6rem);
            color: var(--text-main);
            line-height: 1;
            margin-bottom: 1.5rem;
            opacity: 0;
            transform: translateY(30px);
        }

        /* 3D Interactive Project Cards */
        .project-showcase {
            padding: 5rem 1.5rem;
            perspective: 1000px;
        }

        .project-card-3d {
            background: #FFFFFF;
            border: 1px solid var(--border-glass);
            border-radius: 24px;
            padding: 3rem 2rem;
            position: relative;
            transform-style: preserve-3d;
            transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.6s ease;
            box-shadow: 0 10px 30px rgba(0,0,0,0.04);
            cursor: pointer;
        }

        .project-card-3d:hover {
            transform: translateY(-10px) rotateX(5deg) rotateY(-5deg);
            box-shadow: 20px 30px 50px rgba(225, 187, 65, 0.15);
            border-color: var(--accent-yellow);
        }

        .project-card-3d::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            border-radius: 24px;
            background: linear-gradient(135deg, rgba(225, 187, 65, 0.1), transparent);
            opacity: 0;
            transition: opacity 0.5s ease;
        }

        .project-card-3d:hover::before {
            opacity: 1;
        }

        /* Animated Timeline Component */
        .timeline-section {
            padding: 6rem 1.5rem;
            background: var(--accent-slate);
            color: #FFFFFF;
            position: relative;
        }

        .timeline-container {
            max-width: 800px;
            margin: 0 auto;
            position: relative;
        }

        /* The vertical line */
        .timeline-container::after {
            content: '';
            position: absolute;
            width: 4px;
            background: rgba(255, 255, 255, 0.1);
            top: 0; bottom: 0; left: 50%;
            margin-left: -2px;
        }

        .timeline-progress {
            position: absolute;
            width: 4px;
            background: var(--accent-yellow);
            top: 0; left: 50%;
            margin-left: -2px;
            height: 0%;
            z-index: 1;
        }

        .timeline-item {
            padding: 10px 40px;
            position: relative;
            background-color: inherit;
            width: 50%;
            opacity: 0.3;
            transform: translateY(20px);
            transition: all 0.5s ease;
        }

        .timeline-item.active {
            opacity: 1;
            transform: translateY(0);
        }

        .timeline-item::after {
            content: '';
            position: absolute;
            width: 20px;
            height: 20px;
            right: -10px;
            background-color: var(--bg-main);
            border: 4px solid var(--accent-yellow);
            top: 15px;
            border-radius: 50%;
            z-index: 2;
            transition: background-color 0.3s ease;
        }

        .timeline-item.active::after {
            background-color: var(--accent-yellow);
            box-shadow: 0 0 15px var(--accent-yellow);
        }

        .left { left: 0; }
        .right { left: 50%; }
        .right::after { left: -10px; }

        .timeline-content {
            padding: 1.5rem;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 16px;
            backdrop-filter: blur(10px);
        }

        .timeline-content h3 { color: var(--accent-yellow); margin-bottom: 0.5rem; font-family: var(--font-head); }
        .timeline-content p { color: rgba(255, 255, 255, 0.85); font-size: 0.95rem; }

        @media screen and (max-width: 768px) {
            .timeline-container::after, .timeline-progress { left: 31px; }
            .timeline-item { width: 100%; padding-left: 70px; padding-right: 25px; }
            .timeline-item::after { left: 21px; }
            .right { left: 0%; }
        }
	.admission-page-wrap {
            max-width: 1100px;
            margin: 0 auto;
            padding: 6rem 1.5rem;
        }
        /* Hero with Image Background */
        .page-hero-wrapper-img {
            position: relative;
            padding: 8rem 0 6rem;
            text-align: center;
            background: linear-gradient(135deg, rgba(26, 26, 26, 0.8), rgba(108, 117, 125, 0.7)), url('<?= ASSETS_URL ?>/images/hero/video-poster.jpg') no-repeat center center/cover;
            color: #FCFAF2;
        }
        /* Enhanced Content Cards */
        .content-card {
            background: var(--bg-surface);
            border: 1px solid var(--border-glass);
            border-radius: 28px;
            padding: 3rem;
            margin-bottom: 3rem;
            box-shadow: 0 15px 35px rgba(108, 117, 125, 0.06);
        }

        /* Overview & Video Side-by-Side Grid */
        .overview-video-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 3rem;
            align-items: center;
            margin-bottom: 3rem;
        }

        .overview-video-grid .content-card {
            margin-bottom: 0;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        /* Video Showcase */
        .admission-video-box {
            position: relative;
            width: 100%;
            border-radius: 28px;
            overflow: hidden;
            box-shadow: 0 25px 50px rgba(0,0,0,0.15);
            background: var(--accent-slate);
            height: 100%;
            min-height: 320px;
        }
        .admission-video-box video {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: cover;
        }

        /* Eligibility Table */
        .eligibility-table-wrap {
            overflow-x: auto;
            margin-top: 1.5rem;
            border-radius: 16px;
            border: 1px solid var(--border-glass);
        }
        .eligibility-table {
            width: 100%;
            border-collapse: collapse;
            text-align: left;
            font-size: 0.95rem;
        }
        .eligibility-table th, .eligibility-table td {
            padding: 1.1rem 1.25rem;
            border-bottom: 1px solid var(--border-glass);
        }
        .eligibility-table th {
            background-color: rgba(108, 117, 125, 0.05);
            color: var(--text-main);
            font-family: var(--font-head);
            font-weight: 700;
        }
        .eligibility-table td {
            color: var(--text-muted);
        }

        /* Process Steps Timeline */
        .process-timeline {
            list-style: none;
            padding: 0;
            counter-reset: step-counter;
            margin-top: 1.5rem;
        }
        .process-timeline li {
            counter-increment: step-counter;
            margin-bottom: 2rem;
            position: relative;
            padding-left: 4rem;
        }
        .process-timeline li::before {
            content: "0" counter(step-counter);
            position: absolute;
            left: 0;
            top: 0;
            font-family: var(--font-head);
            font-weight: 700;
            font-size: 1.1rem;
            color: var(--text-main);
            background: linear-gradient(135deg, var(--accent-yellow), var(--accent-gold));
            width: 44px;
            height: 44px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 5px 15px rgba(225, 187, 65, 0.3);
        }

        /* Guaranteed Visible Registration Form Box */
        .registration-form-card {
            background: #FFFFFF;
            border: 2px solid var(--accent-yellow);
            border-radius: 28px;
            padding: 3.5rem 3rem;
            margin-top: 4rem;
            box-shadow: 0 25px 60px rgba(108, 117, 125, 0.12);
        }

        .form-grid-2 {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1.5rem;
        }
        .form-group {
            margin-bottom: 1.5rem;
            text-align: left;
        }
        .form-group label {
            display: block;
            font-weight: 600;
            margin-bottom: 0.5rem;
            color: var(--text-main);
            font-size: 0.95rem;
        }
        .form-group input, .form-group select, .form-group textarea {
            width: 100%;
            padding: 0.95rem 1.2rem;
            border: 1px solid rgba(108, 117, 125, 0.2);
            border-radius: 12px;
            font-family: inherit;
            background: #FCFAF2;
            color: var(--text-main);
            font-size: 1rem;
            transition: border-color 0.3s ease, box-shadow 0.3s ease;
        }
        .form-group input:focus, .form-group select:focus, .form-group textarea:focus {
            outline: none;
            border-color: var(--accent-gold);
            box-shadow: 0 0 0 4px rgba(186, 148, 60, 0.15);
        }

        @media(max-width: 992px) {
            .overview-video-grid {
                grid-template-columns: 1fr;
            }
        }

        @media(max-width: 768px) {
            .form-grid-2 { grid-template-columns: 1fr; }
            .content-card, .registration-form-card { padding: 2rem 1.5rem; }
        }